<template>
	<textarea
		:style="{
			'height': `${height}px`,
			'background-color': bgColor,
			'border':border
		}"
		class='textarea'
		:value="value"
		:placeholder="placeholder"
		@input="$emit('input',$event.target.value)"
	/>
</template>

<script>
export default {
  props: {
    value: String,
    height: {
      type: Number,
      default: 100
    },
    placeholder: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: '#FBFBFB'
    },
    border: {
      type: String,
      default: '3px solid transparent'
    },
  },
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
.textarea {
  width: 100%;
  padding: 20px;
  font-size: $sNormal;
  resize: none;
  border: 3px solid transparent;
  border-radius: 16px;
  outline: none;

  &:focus {
    border-color: #00c9a9 !important;
  }
}
</style>
